<template>
    <section class="form-warpper">
        <el-table :data="state.ruleForm" style="width: 100%" border>
            <el-table-column label="审批提交主体">
                <template #default="scope">

                    <el-select v-model="scope.row.applyEntity" placeholder="请选择审批提交主体" clearable class="w100">
                    <el-option
                    v-for="dict in apply_entity"
                    :key="Number(dict.value)"
                    :label="dict.label"
                    :value="Number(dict.value)"
                     />
                     </el-select>
                </template>
            </el-table-column>
            <el-table-column label="审批动作">
                <template #default="scope">
                    <el-select v-model="scope.row.auditAction" placeholder="请选择审批动作" clearable class="w100">
                    <el-option
                    v-for="dict in audit_action"
                    :key="Number(dict.value)"
                    :label="dict.label"
                    :value="Number(dict.value)"
                     />
                  </el-select>
                </template>
            </el-table-column>
            <el-table-column label="提交日期">
                <template #default="scope">
                    <el-date-picker
                        v-model="scope.row.submitDate" value-format="YYYY-MM-DD" 
                        type="date"
                        placeholder="请选择日期"
                        size="mini"
                    />
                </template>
            </el-table-column>
            <el-table-column label="申请原因">
                <template #default="scope">
                    <el-input placeholder="申请原因" size="mini" v-model="scope.row.applyReason"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-button plan type="danger" size="mini" @click="removeHanlde(scope.row.id)">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button plan type="primary" style="margin-top: 15px;" size="middle" @click="addReport">+ 新增</el-button>
    </section>
</template>

<script setup lang="ts">
import { reactive, defineExpose } from 'vue'
import {  getCurrentInstance} from 'vue';
import { formatDate } from '/@/utils/formatTime'

interface IFormData {
    id: string | number, 
    applyEntity: string, 
    auditAction: string, 
    submitDate: string, 
    applyReason: string
}

const { proxy } = getCurrentInstance();
const {apply_entity,audit_action} = proxy.parseDict("apply_entity","audit_action");
// 定义table数据
const state = reactive({
    ruleForm: [
        { id: '', applyEntity: '', auditAction: '', submitDate: '', applyReason: ''}
    ] as Array<IFormData>
})

// 添加行
const addReport = () => {
    state.ruleForm.push({ applyEntity: '', auditAction: '', submitDate: '', applyReason: '', id: `${Date.now()}`})
}

// 删除行
const removeHanlde = (id: string) => {
    state.ruleForm = state.ruleForm.filter(item => item.id !== id)
}

// 获取数据
const getData = () => {
    if(!state.ruleForm.length) {
        return [{ id: '', applyEntity: '', auditAction: '', submitDate: '', applyReason: ''}]
    }
    return state.ruleForm 
}

// 数据回显
const setData = (list: Array<IFormData > | Array<any>) => { 
    if(list.length) {
        state.ruleForm = [];
        (list || []).forEach((item, index) => {
            state.ruleForm.push({
                id: item.id, 
                applyEntity: item.applyEntity, 
                auditAction: item.auditAction, 
                submitDate: formatDate(new Date(item.submitDate), 'YYYY-mm-dd HH:MM:SS'), 
                applyReason: item.applyReason
            })
        }) 
    } 
}

// 暴露获取表单数据方法
defineExpose({ getData, setData })
</script>